<style>
.task-name{font-size:20px;}
.comment-title{font-size:20px;}
.task-progress{min-height:50px;}
.task-progress .avatar-name {
	float:left;
	margin:5px;
	width:40px;
	height:40px;
	line-height:40px;
	font-size:10px;
	text-align:center;
	display:inline-block;
	border-radius: 50%;
	border:1px solid gray;
	color:gray;
	overflow:hidden;
	filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;
}
.task-progress .avatar {
	float:left;
	margin:5px;
    max-width: 40px;
    max-height: 40px;
    border-radius: 50%;
	filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;
}
.task-progress img.avatar-current {
	float:left;
	margin:0px 5px;
	max-width: 50px;
    max-height: 50px;
	filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;
}
.task-progress div.avatar-current {
	float:left;
	margin:0px 5px;
	width: 50px;
    height: 50px;
	line-height:50px;
	border:1px solid #5FB878;
	color:#5FB878;
	filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;
}
	.comment_name { 
		color:#3D9EEA;
		font-size:15px;
		font-weight: bolder;
	}

</style>
<div class="layui-row layui-col-space10">
	<div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
		<div class="task-name">{$ttInfo['name']}</div>
		<hr class="layui-bg-gray">
		
		<!-- 流转进度 -->
		<div class="task-progress">
			{foreach $progressList as $k => $v}
				{if $v['admin_avatar'] != ''}
					<img class="avatar {if count($progressList) == ($k+1)}avatar-current{/if}" src="{$v['admin_avatar']}"/>
				{else /}
					<div class="avatar-name {if count($progressList) == ($k+1)}avatar-current{else/}avatar{/if}">{$v['admin_name']}</div>
				{/if}
			{/foreach}
		</div>
		
		<table class="layui-table" lay-even="" lay-skin="nob">
			<colgroup>
				<col width="150">
				<col>
			</colgroup>
			<tbody>
				<tr>
					<td>所属项目</td>
					<td>{:arrayGet($projectKV, $ttInfo['project_id'], '')}</td>
				</tr>
				<tr>
					<td>优先级</td>
					<td>{:arrayGet(config('mimo.priority'), $ttInfo['priority'])}</td>
				</tr>
				<tr>
					<td>创建人</td>
					<td>{$creator}</td>
				</tr>
				<tr>
					<td>创建时间</td>
					<td>{:date("Y-m-d H:i:s", $ttInfo['create_time'])}</td>
				</tr>
				<tr>
					<td>关联订单号</td>
					<td>{$ttInfo['client_ordernum']}</td>
				</tr>
				<tr>
					<td>关联物料</td>
          <td>{$ttInfo['material_sku']}</td>
				</tr>
				<tr>
					<td>物料名称</td>
					<td>{$materialInfo['name']}</td>
				</tr>
        <tr>
					<td>物料颜色</td>
					<td>{$materialInfo['color']}</td>
				</tr>
        <tr>
					<td>描述</td>
					<td>{$ttInfo['content']}</td>
				</tr>
			</tbody>
		</table>
  
  		{if $rightsInfo['canChangeProgress']}
	  	<fieldset class="layui-elem-field" style="margin-top: 20px;padding-top:10px;">
	  		<legend>任务流转</legend>
	  		<form class="layui-form" action="{:url('progress')}">
		  		<div class="layui-form-item">
				    <label class="layui-form-label">负责人</label>
				    <div class="layui-input-inline">
				      	<select name="admin_id" lay-filter="progress" lay-search="">
							{foreach $projectUserList as $k => $v}
							<option value="{$k}">{$v}</option>
					        {/foreach}
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">协助人</label>
				    <div class="layui-input-inline">
				      	<select name="assist_admin_ids" lay-filter="progress" lay-search="">
				      		<option value=""></option>
							{foreach $projectUserList as $k => $v}
							<option value="{$k}">{$v}</option>
					        {/foreach}
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">捎句话</label>
				    <div class="layui-input-block">
				      <input type="text" name="remark" lay-verify="remark" autocomplete="off" placeholder="捎句话给TA" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-input-block">
				    	<input type="hidden" class="field-id" name="id" value="{$ttInfo['id']}">
				      	<button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">确定</button>
				      	<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				    </div>
				</div>
	  		</form>
	  	</fieldset>
  		{/if}
	</div>
	
	<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
      <div class="comment_list">
          <table id="comment"></table>
      </div>
		{if $rightsInfo['canCommentCreate']}
		<form class="layui-form" action="{:url('addComment')}?id={$ttInfo['id']}" method="post">
        <textarea id="content" name="content" style="width:100%"></textarea>
        <div class="layui-form-item">
            <div class="layui-input-block fr">
                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true,refresh: false,callback: callbackAddComment}">发布</button>
            </div>
        </div>
		</form>
		{/if}
	</div>
</div>

{include file="system@block/layui" /}
<script type="text/html" title="" id="contentTpl">
    <div class="comment layui-timeline-content layui-text">
        <div class="conmment_details">
            <span class="comment_name">{{d.nick}}</span>     <span>{{layui.util.toDateString(d.create_time * 1000)}}</span>
            <div class="comment_content" >  {{d.content}}</div>
            <h3 class="layui-timeline-title"></h3>
            <p></p>
        </div>
    </div>
</script>
<script>
	// at用户列表
	var atUserKV = {:json_encode($projectUserList)};
</script>
{:at_editor(['content'])}

<script type="text/javascript">
	layui.use(['jquery', 'tool', 'laytpl', 'form', 'element','table'], function() {
		var $ = layui.jquery;
		var laytpl = layui.laytpl;
		var form = layui.form;
		var element = layui.element;
    var table = layui.table;
		window.callbackAddComment = function(obj, res) {
        if (res.code == 1) layer.msg(res.msg, {icon: 1,end:function(){
                window.location.reload();
            }
        });
    }
    var comment={:json_encode($rightsInfo['comment'])};
    var data=comment;
    table.render({
        elem: '#comment'
        ,data:comment
        ,limit: 5
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: '', title: '评论',templet:'#contentTpl'}
        ]]
      });
      
	});
</script>